<template>
  <div>
    <el-row>
      <el-col :span="19">
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
          <el-form-item label="供应商">
            <el-input v-model="queryForm.sname" placeholder="请输入供应商名称"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="queryForm.conPerson" placeholder="请输入联系人姓名"></el-input>
          </el-form-item>
          <el-form-item label="产品类别">
            <!-- <el-input v-model="queryForm.ptid" placeholder="请选择产品类别"></el-input> -->
            <el-select v-model="queryForm.ptid" placeholder="请选择产品类别" clearable="true" filterable>
              <el-option v-for="pt in ptList" :label="pt.ptName" :value="pt.ptid" :key="pt.ptid"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getTableData">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>       

      <div v-if="role == 1">
      <el-col :span="5" style="text-align: right;">
        <el-button-group>
          <el-button type="primary"  @click="openInfo">新增</el-button>
        </el-button-group>
        <el-button-group>
          <el-button type="primary"  @click="openEdit">编辑</el-button>
        </el-button-group>
        <el-button-group>
          <el-button type="primary"  @click="openDel">删除</el-button>
        </el-button-group>
      </el-col>
    </div>
    </el-row>


    <el-row>
      <el-col>
        <el-table
          ref="multipleTable"
          :data="supplierList"
          border
          stripe
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="供应商"
            align="center"
            width="120">
            <template slot-scope="scope">{{ scope.row.sname}}</template>
          </el-table-column>
          <el-table-column
          
            label="联系人"
            width="120">
            <template slot-scope="scope">{{ scope.row.conPerson}}</template>
          </el-table-column>
          <el-table-column

            label="联系方式"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.conInfo}}</template>
          </el-table-column>
          <el-table-column

            label="地址"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.address}}</template>
          </el-table-column>
          <el-table-column
        
            label="产品类别"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.ptName}}</template>
          </el-table-column>

          <div v-if="false">
          <el-table-column
            label="主键"
            align="center"
            width="120">
            <template slot-scope="scope">{{ scope.row.sid}}</template>
          </el-table-column>
        </div>

        </el-table>

        <el-pagination
          background
          @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 9, 10, 15]"
              :page-size="queryForm.limit"
              :current-page="queryForm.page" 
          layout="prev, pager, next,total, sizes,jumper"
          :total="total">
        </el-pagination>

      </el-col>
    </el-row>


    <!-- 采购详情子组件 -->
    <supplier-info :isShow = "visible" :mod = "mod" @closeDialog = "setIsShow" @supSave = "tableLoad" @proSub = "tLoad" :proInfo = "supForm"></supplier-info>
  </div>
</template>

<script>
 import RoleShow from '@/components/roleShow.vue';
import supplierInfo from '@/components/supplierInfo.vue';
 export default {
  name:"addSupplier",
   components:{
     supplierInfo
   },
  data(){
    return{
      supplierList:[],
      ptList:[],
      queryForm:{
        sid:0,
        sname:'',
        conPerson:'',
        conInfo:'',
        address:'',
        ptid:'',
        page:1,
        limit:9
      },
      //分页相关
      total: 0,  //总条数
      //布尔变量，控制弹窗
      visible : false,
      theStatus: 1,  
      //定义一个传参的表
      supForm:{},
      managerShow:false,
      checkedsupplierList:[],
      role: null
    }
  },
  methods:{
    //val代表所有选中项数据，是一个数组
    //可以用在判断选中项数量
    handleSelectionChange(val){
      this.checkedsupplierList = val
    },
    //获取供应商表格数据
    getTableData(resetPage){
      if(resetPage){
        this.queryForm.page = 1
      }
      
        this.$http.post("/getSupplierCount",this.queryForm).then(res =>{
        this.total = res.data
        debugger
      })
        this.$http.post("/getSupplier",this.queryForm).then(res =>{
        this.supplierList = res.data
        debugger
      })
    },
     getPtList(){
       this.$http.get("/getPt").then(res =>{
         this.ptList = res.data
       })
     },
    handleSizeChange(val) {
      //每页显示条数变化，即limit变化
        console.log(`每页 ${val} 条`);
        this.queryForm.limit = val
        this.getTableData(resetPage = true)
      },
      //当前页码变化，即page变化
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.queryForm.page = val
        this.getTableData()
      },
      openInfo(){
        this.visible = true
      },
      openEdit(){
          //先判断用户的选中项是否为一个
          if(this.checkedsupplierList.length == 0){
          this.$message.warning("请选择要修改的供应商")
          return
        }
        if(this.checkedsupplierList.length > 1){
          this.$message.warning("请选择一条数据")
          return
        }
        //获取选中数据的主键
        //不知道数据格式时可以加断点调试
        let sId = this.checkedsupplierList[0].sId
        //得到主键后调用后台获取员工的详细信息
        //路径写法和后台接收的格式相对应
      
        this.$http.get('/getSup/' + sId).then(res =>{
          this.supForm = res.data
          this.visible = true  
        })
      },
      setIsShow(){
        //弹窗关闭
        this.mod = 0
        this.visible = false
      },
      tableLoad(msg){
        if(msg === 'success'){
          //关闭弹窗
          this.visible = false
          //提示信息并刷新表单
          this.$message.success("操作成功")
          this.getTableData()
        }
      },
      openDel(){
        if(this.checkedsupplierList.length == 0){
          this.$message.warning("请选择要删除的员工信息")
          return
        }
        //确认是否要删除
        this.$confirm('确定要删除选中的数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //then代表点击确定后的动作
          let sIds = []
          for(let sup of this.checkedsupplierList){
            sIds.push(sup.sId)
          }
          //调用后台执行删除
          this.$http.post('/delSup',sIds,{ headers: { 'Content-Type': 'application/json' } }).then(res =>{
            if(res.data === 'success'){
              this.$message.success('删除成功')
              this.getTableData()
            } else{
              this.$message.error('删除失败')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
  },
  //页面一进来就获取员工表和部门表参数
  created(){
    debugger
    this.getTableData()
    this.getPtList()
    this.role = parseInt(localStorage.getItem("roleid"))
  },

}
</script>

<style>

</style>